<template>
	<div class="kComponentStyle">
		<el-form label-width="90px" :model="$currentproperties" :rules="rules" size="small" class="lef">
			<el-collapse v-model="activeNames">
				<el-collapse-item title="行属性" name="1">
					<el-form-item label="栅格间隔" :hide-required-asterisk="true">
						<el-input-number size="mini" v-model="$currentproperties.gutter" style="width:100%" :min="0"
							:max="100000000000" :precision="0" :step="1"></el-input-number>
					</el-form-item>
				</el-collapse-item>

				<el-collapse-item title="列属性" name="2">
					<div v-for="(item, index) in $currentComponent.pageComponents">
						<div :key="index" style="display: flex; justify-content: top;">
							<el-form-item :label="'栅格宽度'+(index+1)" :hide-required-asterisk="true">
								<el-input-number size="mini" v-model="item.setStyle.span" style="width:100%" :min="0"
									:max="100000000000" :precision="0" :step="1"></el-input-number>
							</el-form-item>
							<el-button type="text" icon="el-icon-delete" style="margin-left: 10px; margin-bottom:20px;"
								@click="delCol(index)"></el-button>
						</div>
					</div>
					<div style="margin: 0px 10px 0 10px">
						<el-button size="mini" style="width: 100%" type="primary" icon="el-icon-plus"
							@click="addCol">增加栅格列</el-button>
					</div>
				</el-collapse-item>

			</el-collapse>

		</el-form>
	</div>
</template>

<script>
	import componentProperties from '@/utils/componentProperties' // 组件数据
	import {
		mapState,
		mapMutations
	}
	from 'vuex'
	export default {
		name: 'kLayoutStyle',
		props: {
		// 	datas: Object,
		// 	parentComponent: Object
		},
		computed: {
			...mapState(['$pageSchema', '$rightcom', '$leftcom', '$currentproperties', '$currentComponent'])
		},
		created() {
			console.info(this.$currentproperties)
		},
		data() {
			return {
				activeNames: ['1', '2'],
				rules: {
					//校验表单输入
					noticeText: [
						//页面名称
						{
							required: true,
							message: '请输入公告',
							trigger: 'blur'
						},
					],
				},
				predefineColors: [
					// 颜色选择器预设
					'#ff4500',
					'#ff8c00',
					'#ffd700',
					'#90ee90',
					'#00ced1',
					'#1e90ff',
					'#c71585',
					'#409EFF',
					'#909399',
					'#C0C4CC',
					'rgba(255, 69, 0, 0.68)',
					'rgb(255, 120, 0)',
					'hsv(51, 100, 98)',
					'hsva(120, 40, 94, 0.5)',
					'hsl(181, 100%, 37%)',
					'hsla(209, 100%, 56%, 0.73)',
					'#c7158577',
				],
				colItemDefault: {
					span: 12,
					offset: 0,
					push: 0,
					pull: 0,
					pageComponents: []
				}
			}
		},
		methods: {
			addCol() {
				let tmp = JSON.parse(JSON.stringify(componentProperties.get("kLayoutCol")))
				tmp.id = "widget-" + tmp.component + "-" + Date.now()
				this.$currentComponent.pageComponents.push(tmp);
			},
			delCol(index) {
				this.$currentComponent.pageComponents.splice(index, 1);

			},
		}
	}
</script>

<style scoped lang="scss">

</style>